<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐淘商城-购物车</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/mui/css/mui.min.css">
    <link rel="stylesheet" href="./lib/fa/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>
    <div class="lt_container">
        <!-------------- header -------------->
        <div class="header">
            <a href="javascript:history.go(-1);" class="icon_left">
                <i class="mui-icon mui-icon-arrowleft"></i>
            </a>
            <div class="title">
                <h4>购物车</h4>
            </div>
        </div>
        <!-------------- main -------------->
        <div class="main">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">

                </div>
            </div>
        </div>
        <!-------------- footer -------------->
        <div class="total">
            <span>订单总金额 &yen;</span><span class="total_price">00.00</span>
            <button class="mui-pull-right mui-btn-danger">生成订单</button>
        </div>
        <div class="footer">
            <ul>
                <li>
                    <a href="index.html">
                        <span class="fa fa-home"></span>
                        <p>首页</p>
                    </a>
                </li>
                <li>
                    <a href="category.html">
                        <span class="fa fa-bars"></span>
                        <p>分类</p>
                    </a>
                </li>
                <li class="active">
                    <a href="cart.html">
                        <span class="fa fa-shopping-cart"></span>
                        <p>购物车</p>
                    </a>
                </li>
                <li>
                    <a href="user.html">
                        <span class="fa fa-user"></span>
                        <p>会员中心</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <script type="text/html" id="tmp">
        {{ if list.length === 0 }}
        <p>购物车为空</p>
        {{ else }}
        <ul id="OA_task_2" class="mui-table-view mui-table-view-chevron">
                {{ each list v i }}
        <li class="mui-table-view-cell">
            <div class="mui-slider-right mui-disabled" data-id="{{v.id}}" data-size="{{v.size}}" data-product-size="{{v.productSize}}" data-num="{{v.num}}" data-product-num="{{v.productNum}}">
                <a class="mui-btn mui-btn-primary mui-icon mui-icon-compose btn_edit"></a>
                <a class="mui-btn mui-btn-red mui-icon mui-icon-trash btn_delete"></a>
            </div>
            <div class="mui-slider-handle">
                <div class="left mui-pull-left">
                    <img src="{{ v.pic[0].picAddr }}" alt="">
                    <!-- 选中按钮 -->
                    <input type="checkbox" name="" id="" data-price="{{v.price}}" data-num="{{v.num}}">
                </div>
                <div class="right">
                    <p class="mui-ellipsis-2">{{v.proName}}</p>
                    <div class="param">
                        <span class="price">&yen;{{v.price}}</span>
                        <span class="old_price">&yen;{{v.oldPrice}}</span>
                        <span class="num mui-pull-right">{{v.num}}双</span>
                        <p>鞋码 : {{ v.size }}</p>
                    </div>
                </div>
            </div>
        </li>
        {{/each}}
    </ul>
    {{/if}}

    </script>

    <script type="text/html" id="tmp2">
        <div class="size">
            尺码：
                <% 
                var arr = productSize.split('-')
                for(var i = +arr[0]; i <= arr[1]; i++) {
                
                %>
                <span class="<%= i === +size ? 'active' : '' %>"><%= i %></span>
                <% } %>
            </div>
            <div class="num">
                数量：
                <div class="mui-numbox"  data-numbox-min="1" data-numbox-max="{{ productNum }}">
                    <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                    <input class="mui-numbox-input" type="number" value="{{num}}" />
                    <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
                </div>
            </div>
    </script>

    <script src="./lib/zepto/zepto.min.js"></script>
    <script src="./lib/mui/js/mui.js"></script>
    <script src="./lib/artTemplate/template-web.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/cart.js"></script>
</body>

</html>